<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        color: ["#FEDB5B", "#00A8FF"],
        tooltip: {
          trigger: 'item'
        },
        series: [{
          radius: ['30%', '50%'],
          type: 'pie',
          label: {
            normal: {
              textStyle: {
                fontSize: 20
              }
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 10,
              length2: 10
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { value: 25, name: '儿童票' },
            { value: 75, name: '成人票' }
          ]
        }]
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
